记录下学习过程使用gulp的一些经验
我的文件夹目录是这样的
|-- project
|-- child-project
|-- src
|-- html
|-- less
|-- js
|-- img
|-- dist
|-- html
|-- css
|-- js
|-- img
功能需求如下
- 在
project
任意子目录下修改less
文件后自动编译在对应项目文件夹的css
文件夹下- 在
project
任意子目录下修改html、js、less文件后都自动刷新浏览器2017-12-14
- 增加了压缩文件的需求,需要将src中的js文件/img/css文件进行压缩,压缩至dist文件夹下
- 增加了检查js代码
实际配置
//编译与刷新浏览器
//导入工具包
var gulp = require('gulp'),
less = require('gulp-less'),
browserSync = require('browser-sync').create(),
browserReload = browserSync.reload,
rename = require('gulp-rename');
//定义less编译任务
gulp.task('lessCompile', function() {
gulp.src('./project/**/*.less') //该任务针对的文件
.pipe(less())//该任务调用的模块
.pipe(rename(function(path) {
return path.dirname = path.dirname.replace('less', 'css');
}))
.pipe(gulp.dest('./project'))
.pipe(browserReload({stream: true}));
});
//监听 本地 less/html/js 文件
gulp.task('serve', function(){
//监听本地文件
browserSync.init({
server: {
baseDir: "./project",
directory: true
}
});
//监听less
gulp.watch("./project/**/*.less", ['lessCompile']);
//监听html
gulp.watch("./project/**/*.html").on('change', browserReload);
//监听js
gulp.watch("./project/**/*.js").on('change', browserReload);
});
//定义默认任务
gulp.task('default', ['serve']);
//代码检查和压缩
gulp.task('jsHint', function() {
gulp.src(['./project/**/*.js', '!./project/**/dist/**/*.js'])//检查的文件,忽略dist中的js文件
.pipe(jshint(jshintConfig))//检查
.pipe(jshint.reporter('default')); // 输出检查结果
});
//定义js压缩任务(css与img同此,更换插件即可)
gulp.task('jsmin', function() {
gulp.src(['./project/**/*.js', '!./project/**/dist/**/*.js'])//压缩的文件,忽略dist中的js文件
.pipe(uglify())//压缩
//.pipe(rename({suffix:'.min'}))//增加min后缀
.pipe(rename(function(path) {
return path.dirname = path.dirname.replace('src', 'dist');
}))//压缩至dist文件夹
.pipe(gulp.dest('./project'));
});
参考学习
http://www.cnblogs.com/2050/p...,src与dest的路径学习参考此文
http://www.ydcss.com/archives/18 gulp的详细入门指南
http://blog.csdn.net/u0137205... jshint的参数的配置
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。